<template>
  <div>
    <el-row style="margin-left: 10px;margin-top: 10px">
      <el-col>
        <el-button v-if="editPermission" size="small" type="primary" @click="deleteData">Delete</el-button>
        <el-button v-if="editPermission" size="small" type="primary" @click="openModify">Modify</el-button>
        <el-button v-if="editPermission" size="small" type="primary" @click="openAdd">Add</el-button>
        <el-button v-if="editPermission" size="small" type="primary" @click="openUpload">Upload</el-button>
        <el-button size="small" type="primary" @click="exportData">Export</el-button>
      </el-col>
    </el-row>

    <el-row style="margin-left: 10px;margin-top: 10px">
      <el-table :data="tableData" border stripe>
        <el-table-column v-for="item in getPartTableHeader()" :prop="item.prop" :key="item.prop" :label="item.display">
        </el-table-column>
      </el-table>
    </el-row>

    <el-dialog title="Create Dialog" :visible.sync="showCreateDialog" width="80%" @close="cancellDigalog()">
      <el-row>
        <el-button size="small" type="primary" @click="addRecord()">{{ "addRecord" }}</el-button>
      </el-row>
      <el-row>
        <el-table :data="createRowData" border stripe>

          <el-table-column :label="'model'" prop="model">
            <template slot-scope="scope">
              <el-input v-model="scope.row.model"></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="'level'" prop="level">
            <template slot-scope="scope">
              <el-input v-model="scope.row.level"></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="'prefixPn'" prop="prefixPn">
            <template slot-scope="scope">
              <el-input v-model="scope.row.prefixPn"></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="'sortString'" prop="sortString">
            <template slot-scope="scope">
              <el-input v-model="scope.row.sortString"></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="'countersignFun'" prop="countersignFun">
            <template slot-scope="scope">
              <el-input v-model="scope.row.countersignFun"></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="'type'" prop="type">
            <template slot-scope="scope">
              <el-input v-model="scope.row.type"></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="'modifiedDate'" prop="modifiedDate">
            <template slot-scope="scope">
              <el-input v-model="scope.row.modifiedDate"></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="'remark'" prop="remark">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-delete"
                @click="handleDeleteProduct(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <span slot="footer">
        <el-button @click="showCreateDialog = false">Cancel</el-button>
        <el-button type="primary" @click="doCreate()">OK</el-button>
      </span>
    </el-dialog>

    <!-- 导入文件 -->
    <el-dialog title="Upload Dialog" :visible.sync="showUploadDialog" width="25%" @close="cancellDigalog()">

      <el-upload class="upload-demo" accept="xlsx" action="https://jsonplaceholder.typicode.com/posts/"
        style="width: 100%;" :on-success="uploadSuccessAction" :before-upload="beforeAvatarUpload" :data="{ oid: '123' }"
        drag multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">导入请选择xlsx文件</div>
      </el-upload>

    </el-dialog>

  </div>

</template>

<script>
export default {
  name: "bomFunctionStructure",
  props: {
  },
  components: {},
  mounted() { },
  data() {
    return {
      loading: false,
      // 选中的数据
      selectRowData: [],
      // 新增的数据
      createRowData: [],
      tableData: [],
      applyList: [],
      modifyDialog: false,
      showCreateDialog: false,
      showUploadDialog: false,
      // 编辑权限
      editPermission: true,
      isDisabled: false,
      // url
      executeUrl: {
      },
      tableData: [
        {
          model: 'FT490',
          level: '1',
          prefixPn: '45',
          sortString: 'test',
          countersignFun: 'EE',
          type: 'PBCAMB',
          modifiedDate: '2024-10-23',
          remark: 'aaa',
        },
        {
          model: 'FT490',
          level: '2',
          prefixPn: '55',
          sortString: 'test2',
          countersignFun: 'EE',
          type: 'PBCAMBD',
          modifiedDate: '2024-11-23',
          remark: 'BBBB',
        }
      ],
    }
  },
  methods: {
    getPartTableHeader() {
      return [
        {
          display: 'Model',
          prop: 'model',
        },
        {
          display: 'Level',
          prop: 'level'
        },
        {
          display: 'Prefix PN',
          prop: 'prefixPn'
        },
        {
          display: 'Sort String',
          prop: 'sortString'
        },
        {
          display: 'CounterSign Fun',
          prop: 'countersignFun'
        },
        {
          display: 'type',
          prop: 'type'
        },
        {
          display: 'Modified Date',
          prop: 'modifiedDate'
        },
        {
          display: 'Remark',
          prop: 'remark'
        },
      ]
    },
    handleSelection() { },
    deleteData() { },
    openModify() { },
    openAdd() {
      this.showCreateDialog = !this.showCreateDialog;
    },
    openUpload() {
      this.showUploadDialog = !this.showUploadDialog;
    },
    exportData() { 
      this.downloadFile('http://localhost:8013/file/test-detail', "exp")
      // 凑地址，给名字调用downloadFile(url, name)下载
    },
    downloadFile(url, name) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = 'blob';
      xhr.onload = function() {
        if (xhr.status === 200) {
          var blob = xhr.response;
          var link = document.createElement('a');
          link.style.display = 'none';
          link.href = window.URL.createObjectURL(blob);
          link.setAttribute('download', name+'.xlsx');
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
      };
      xhr.send();
    },
    doCreate() {
      console.log(this.createRowData)
    },
    beforeAvatarUpload(file) {
      const isXlsx = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      if (!isXlsx) {
        this.$message.error('The file extension for importing can only be xlsx!');
      }
      return isXlsx;
    },
    cancellDigalog() {
      this.showCreateDialog = false;
    },
    uploadSuccessAction() {
      this.showUploadDialog = false;
      this.tableData.push({
        model: '8848',
        level: '2',
        prefixPn: '55',
        sortString: 'test2',
        countersignFun: 'EE',
        type: 'PBCAMBD',
        modifiedDate: '2024-11-23',
        remark: 'BBBB',
      })
    },
    addRecord() {
      this.createRowData.push({
        model: '',
        level: '',
        prefixPn: '',
        sortString: '',
        countersignFun: '',
        type: '',
        modifiedDate: '',
        remark: ''
      })
    },
    applyDeleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleDeleteProduct(index, rows) {
      this.createRowData.splice(index, 1)
    }
  }
}
</script>

<style scoped>
/deep/ .el-upload {
  width: 100%;
}

/deep/ .el-upload .el-upload-dragger {
  width: 100%;
}
</style>